<template>
    <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  import * as echarts from 'echarts';
  
  export default defineComponent({
    mounted() {
      // 获取容器元素
      const chartContainer = this.$refs.chartContainer as HTMLDivElement;
  
      // 初始化 ECharts 实例
      const chart = echarts.init(chartContainer);
  
      // 配置环形图数据
      const option: echarts.EChartsOption = {
        title: {
          text: '已答题目知识点比例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
        //   orient: 'vertical',
          left: 'center',
          bottom:10,
          data: ['mysql', 'vue', 'java','python','数据结构']
        },
        series: [
          {
            name: '数据名称',
            type: 'pie',
            radius: ['50%', '70%'], // 设置内半径和外半径，即可生成环形图
            data: [
              { value: 335, name: 'mysql' },
              { value: 310, name: 'vue' },
              { value: 234, name: 'java' },
              { value: 310, name: 'python' },
              { value: 234, name: '数据结构' },
            ]
          }
        ]
      };
  
      // 使用配置项和数据渲染图表
      chart.setOption(option);
    }
  });
  </script>
  